<template>
	<view class="">

		<cu-custom bgColor="bg-white"  :isBack="true" textRight="true" type="1">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>

		<!-- 	<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText" class="titilestyle">{{title}}</block>
		
		</cu-custom> -->


		<view class="content-box ">
			<view class="search-box">
				<view class="search-item ">
					<view class="view-input flex justify-between align-center">
						<input type="text" class="basis-xll" value="" placeholder="搜索课程" />

						<view class="cuIcon-search">

						</view>
					</view>

				</view>
			</view>



			<mescroll-body bottom="20%" height="80%" top="20" class="mescroll-body" ref="mescrollRef" @init="mescrollInit"
				@down="downCallback" @up="upCallback">
				<view class="banner">
					<image :src="res+'/static/cloudClassroom/banner.png'" mode=""></image>
				</view>

				<view class="applist grid col-4">
					<view class="item middle flex-direction" v-for="(item,index) in app" :key="index"
						@click="jumpTo('./zhibo')">

						<image class="" :src="res+item.icon" mode=""></image>
						{{item.name}}
					</view>

				</view>

				<view class="zhibo">
					<image :src="res+'/static/cloudClassroom/zhibo.png'" mode=""></image>
				</view>

				<scroll-view scroll-x="true" class="tab-box middle">
					<view class="left-box">

					</view>
					<view v-for="(item,index) in taber" :key="index" :class="tabIndex==index?'hover':'nohover'"
						@click="changeTab(index)"> {{item.name}}</view>
				</scroll-view>

				<view class="list grid col-2 ">
					<view class="item flex  " v-for="(item,i) in list" :key="i" :class="(i+1)%2==0?'justify-end':''">
						<view class="box ">
							<image :src="res+item.bg" mode="aspectFill"></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="bofang">
								{{item.playnum}}次播放
							</view>
						</view>

					</view>



				</view>




			</mescroll-body>





		</view>





	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import {
		getCourselist
	} from "@/static/cloudClassroom/api.js"

	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "云课堂",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				taber: [{
						name: "最新课程",
						path: "/pages/cloudClassroom/zhibo",
						type: 0
					},
					{
						name: "职场技能",
						path: "/pages/cloudClassroom/zhibo",
						type: 1
					},
					{
						name: "编程开发",
						path: "/pages/cloudClassroom/zhibo",
						type: 2
					},
					{
						name: "数据科学",
						path: "/pages/cloudClassroom/zhibo",
						type: 3
					},
					{
						name: "职业考试",
						path: "/pages/cloudClassroom/zhibo",
						type: 4
					},
					{
						name: "计算机等级考试",
						path: "/pages/cloudClassroom/zhibo",
						type: 5
					},
					{
						name: "高等数学",
						path: "/pages/cloudClassroom/zhibo",
						type: 6
					},
					{
						name: "英语四级课程",
						path: "/pages/cloudClassroom/zhibo",
						type: 7
					}

				],
				app: [{
						name: "精选网课",
						icon: "/static/cloudClassroom/1.png",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "职业培训",
						icon: "/static/cloudClassroom/2.png",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "讲师直播",
						icon: "/static/cloudClassroom/3.png",
						path: "/pages/cloudClassroom/zhibo"
					},

					{
						name: "我的课程",
						icon: "/static/cloudClassroom/4.png",
						path: "/pages/cloudClassroom/zhibo"
					}

				],
				list: [], //课程列表
			}
		},
		methods: {
			changeTab(i) {
				this.tabIndex = i;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},

			upCallback(page) {
				getCourselist(page.num, page.size, this.taber[this.tabIndex].type).then(curPageData => {
					console.log(curPageData)
					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}







	}
</script>

<style lang="scss" scoped>
	.content-box {
		$w: calc(100vw*(710/750));
		

		.search-box {
			width: 100vw;
			background-color: #F7F7F7;
			min-height: calc(100vw*(72/750));
			z-index: 99;
			
			padding-bottom: 20rpx;

			.search-item {
				padding-top: 20rpx;
				z-index: 99;
				position: fixed;
				width: 100vw;
				background-color: #F7F7F7;
				padding-bottom: 20rpx;
				
				height: calc(100vw*(80/750));
				.view-input {
					margin-left: calc(100vw*(24/750));
					width: calc(100vw*(702/750));
					padding: 0 42rpx 0 42rpx;
					box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
					border-radius: 20rpx;
					height: calc(100vw*(72/750));
					background: #FFFFFF;
				}
				input {
					font-size: 24rpx;
				}

				.cuIcon-search {
					font-size: 38rpx;
				}


				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}


		}

		.mescroll-body {

			width: 100vw;
			

			.banner {
				margin: 0 calc(100vw*(20/750));
				width: $w;
				height: calc(100vw*(200/750));
				background: #205BB8;
				border-radius: 20rpx;
				margin-top: 20rpx;

				image {
					width: $w;
					height: calc(100vw*(200/750));
				}
			}

			.applist {
				margin: 0 calc(100vw*(20/750));
				width: $w;
				height: calc(100vw*(200/750));
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				margin-top: 20rpx;

				image {
					width: calc(100vw*(89/750));
					height: calc(100vw*(89/750));
					margin-bottom: 8rpx;
				}

				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}


			.zhibo {

				width: $w;
				height: calc(100vw*(680/750));
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				margin: calc(100vw*(20/750));

				image {
					width: $w;
					height: calc(100vw*(680/750));
				}
			}

			.tab-box {
				width: 100vw;
				margin-top: 20rpx;
				min-height: 60rpx;
				white-space: nowrap;
				font-family: PingFang SC;

				.left-box {
					width: calc(100vw*(59/750));
					height: inherit;
					display: inline-block;
				}

				.hover {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.nohover {
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}

				view {
					margin-right: 30rpx;
					display: inline-block;
				}

			}

			.list {
				width: $w;
				margin-left: calc(100vw*(20/750));

				.item {
					font-family: PingFang SC;
					margin-top: calc(100vw*(20/750));

					.box {
						image {
							width: calc(100vw*(340/750));
							height: calc(100vw*(200/750));
							border-radius: 20rpx;

						}

						.title {
							margin-top: 25rpx;
							font-size: 24rpx;
							font-weight: 800;
							color: #333333;
							padding-left: 14rpx;
						}

						.bofang {
							margin-top: 19rpx;
							padding-left: 14rpx;
							font-size: 20rpx;

							font-weight: 500;
							color: #999999;
						}
					}

				}

			}

		}


	}
</style>
